<template>
	<view class="wrap">
		<u-navbar :title="$t('jyskh')" title-width="340" :border-bottom="false" back-icon-color="#fff" title-color="#fff" :background="{ backgroundColor: '#0030A8' }"></u-navbar>
		<view class="tom-container">
			<view class="apiManage_top">
				<!-- <text class="text">交易手续费{{ dataPage.tradeFee * 100 }}%的返佣</text> -->
			</view>
			<view class="apiManage_block">
				<view class="btn" @tap="toPage"></view>
				<view class="text">{{$t('jysxf')}}{{ dataPage.tradeFee * 100 }}%{{$t('dfy')}}</view>
			</view>
			<image class="apiManage_title" src="/static/apiManagebg3.png"></image>
			<view class="apiManage_fuwb">
				<view class="title">{{$t('jysm')}}：</view>
				<view class="text"><rich-text :nodes="dataPage.tradeIntroduce"></rich-text></view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
export default {
	data() {
		return {
			dataPage: {}
		};
	},
	onShow() {
		this.getData();
	},
	computed: {
		...mapState(['userInfo'])
	},
	methods: {
		toPage() {
			plus.runtime.openURL(this.userInfo.binanceUrl);
		},
		getData() {
			this.$api.userApi.getTradeExplanation().then(res => {
				this.dataPage = res.data;
				console.log(res);
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.tom-container {
	background-color: #122aaa;
	.apiManage_top {
		width: 100%;
		height: 374rpx;
		background-image: url('/static/apiManagebg4.png');
		background-size: 100% 100%;
		.text {
			color: #fff;
			font-size: 10px;
			background-color: #fab241;
			position: relative;
			top: 176rpx;
			left: 104rpx;
			padding: 4rpx 20rpx;
		}
	}
	.apiManage_block {
		width: 710rpx;
		height: 308rpx;
		padding: 0px 20rpx;
		margin: -90rpx auto 0rpx auto;
		background-image: url('/static/apiManagebg1.png');
		background-size: 100% 100%;
		position: relative;
		z-index: 2;
		.btn {
			width: 656rpx;
			height: 82rpx;
			position: absolute;
			bottom: 92rpx;
			left: 50%;
			transform: translateX(-50%);
		}
		.text {
			color: #666;
			font-size: 28rpx;
			position: absolute;
			bottom: 40rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}
	.apiManage_title {
		width: 642rpx;
		height: 108rpx;
		margin: 80rpx auto 40rpx auto;
	}
	.apiManage_fuwb {
		background-image: url('/static/apiManagebg2.png');
		background-size: 100% 100%;
		width: 690rpx;
		height: 315rpx;
		margin: 0rpx auto 10rpx auto;
		padding: 40rpx;
		.title {
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
		}
		.text {
		}
	}
}
</style>
